<script setup lang="ts">
import { useRouter } from 'vue-router'

import BiNavBar from '@/components/bi-navbar/index.vue'

const router = useRouter()
</script>

<template>
    <div class="circle"></div>
    <img class="streamer" src="@/assets/imgs/invited/streamer.png" width="350" alt="streamer">
    <div class="banner">
        <BiNavBar @click-left="router.back" background-color="transparent" arrow-color="#ffffff" />
        <div class="banner-icon">
            <img class="banner-icon_img" src="@/assets/imgs/invited/gift.png" width="100" alt="gift">
        </div>
    </div>
</template>

<style scoped lang="scss">
.circle {
    position: absolute;
    width: 100%;
    height: 50vmin;
    overflow: hidden;
    transform: translate(0, 0);

    &::before {
        content: '';
        position: absolute;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 110vmin;
        height: 110vmin;
        background-color: var(--invited-outside-color);
        border-radius: 0 0 50% 50%;
    }

    &::after {
        content: '';
        position: absolute;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 85vmin;
        height: 85vmin;
        background-color: var(--invited-inset-color);
        border-radius: 50%;
    }
}

.streamer {
    position: absolute;
    width: 100%;
    object-fit: contain;
    pointer-events: none;
    z-index: 0;
}

.banner {
    position: relative;
    width: 100%;
    height: 38vmin;
    z-index: 1;
    overflow: hidden;

    &::before {
        --size: 15vmin;
        content: '';
        position: absolute;
        top: 0;
        left: 2vmin;
        width: var(--size);
        height: var(--size);
        background: url('@/assets/imgs/invited/doller.png') no-repeat center -3vmin;
        background-size: contain;
    }

    &::after {
        --size: 15vmin;
        content: '';
        position: absolute;
        bottom: 0;
        right: 17vmin;
        width: var(--size);
        height: var(--size);
        background: url('@/assets/imgs/invited/doller.png') no-repeat center center;
        background-size: contain;
        transform: rotate(196deg) rotateX(201deg);
    }

    &-icon {
        position: absolute;
        bottom: -45px;
        left: 50%;
        transform: translateX(-50%);
        width: 81vmin;
        height: 51vmin;
        background: url('@/assets/imgs/invited/cloud.png') no-repeat center -7.9vmin;
        background-size: 89vmin auto;
        display: flex;
        justify-content: center;
        align-items: flex-end;

        &::before {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            transform: translate(50%, 0%);
            width: 12vmin;
            height: 9vmin;
            background: url('@/assets/imgs/invited/coin.png') no-repeat center center;
            background-size: 100%;
        }

        &::after {
            content: '';
            position: absolute;
            bottom: 14vmin;
            right: 16vmin;
            transform: translate(50%, -35%);
            width: 18vmin;
            height: 9vmin;
            background: url('@/assets/imgs/invited/share.png') no-repeat center center;
            background-size: 100%;
        }

        &_img {
            width: 54vmin;
            object-fit: contain;
            transform: translateY(9.1vmin);
        }
    }
}
</style>